// 查询雇员姓名，身份证，客户名称等
import React from 'react';
import { Spin, AutoComplete, message, Form } from 'antd';
import { getIdCodeEmpList } from '@/services/api';
import Search from '@/components/AntDesign/Search';
import PropTypes from 'prop-types';
import memoize from 'memoize-one';

// const { Search } = Input;
const FormItem = Form.Item;

class SearchEmpWithState extends React.Component {
  /**
   * select options选项集数据 过滤成AutoComplete组件能够识别的options
   * @param {Array} list 从后台获取到的人员列表
   *  @param {String} filedName 上级传递下来的filedName
   */
  filterOptions = memoize((list, filedName) => {
    let options = [];
    if (list && list.length) {
      options = list.map(item => ({
        value: item[filedName],
        label: `${item.idCode} (${item.custName})`,
        info: item,
      }));
    }
    return options;
  });

  constructor(props) {
    super(props);
    this.state = {
      idCodeEmpList: [],
      empInfo: {},
      loading: false,
    };
    // 同步ref
    this.formRef = props.forwardRef;
  }

  /**
   * 输入证件号清空选择
   * @param {String} value 输入的value
   */
  changeIdCode = value => {
    if (value.trim()) {
      this.setState({
        empInfo: {},
      });
    }
  };

  /**
   * 输入证件号查询员工
   * @param {String} value 输入的value
   */
  searchEmpIdCode = async value => {
    const { searchUrl, params, filedName } = this.props;
    if (value.trim()) {
      const searchValue = value
        .trim()
        .split('(')[0]
        .trim();
      this.formRef.current.setFieldsValue({ [filedName]: searchValue });
      await this.setState({
        loading: true,
      });
      try {
        const res = await getIdCodeEmpList(searchUrl, { idCode: searchValue, ...params });
        if (res.success && res.data) {
          if (!res.data.length) {
            message.warning('没有查询到该雇员下的信息！');
            return false;
          }
          this.setState({
            idCodeEmpList: res.data,
          });
        } else {
          message.warning(res.message || '网络异常,请检查网络！');
        }
      } catch (error) {
        console.error(error);
      } finally {
        this.setState({ loading: false });
      }
    }
  };

  /**
   * 选择某一雇员
   * @param {object} value
   * @param {object} options
   */
  selectEmpIdCode = (value, options) => {
    const { filedName } = this.props;
    const empInfo = options.info;
    this.setState({
      empInfo: { ...empInfo, showIdCodeText: `${empInfo.idCode} (${empInfo.custName})` },
    });
    this.formRef.current.setFieldsValue({ [filedName]: `${empInfo.idCode} (${empInfo.custName})` });
    // 关于获取到的人员信息，全部存储在表单的empInfo中 如有必要可通过getFieldsValue获取
    this.formRef.current.setFieldsValue({ empInfo });
  };

  render() {
    const { formItemLayout, filedName = 'idCode' } = this.props;
    const { idCodeEmpList, empInfo = {}, loading } = this.state;
    // 雇员列表查询
    const options = this.filterOptions(idCodeEmpList, filedName);
    return (
      <Form ref={this.formRef} initialValues={{ [filedName]: empInfo.showIdCodeText }}>
        <FormItem
          {...formItemLayout}
          name={[filedName]}
          rules={[{ required: true, message: '请正确输入证件号码' }]}
          label="证件号"
        >
          <AutoComplete
            style={{ width: '100%' }}
            options={options}
            onChange={this.changeIdCode}
            onSelect={this.selectEmpIdCode}
            notFoundContent={loading ? <Spin size="small" /> : null}
          >
            <Search
              placeholder="请正确输入证件号码"
              style={{ width: '100%' }}
              filterOption={(inputValue, option) =>
                option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
              }
              onSearch={this.searchEmpIdCode}
            />
          </AutoComplete>
        </FormItem>
        <FormItem {...formItemLayout} label="姓名">
          {empInfo.empName || '--'}
        </FormItem>
        <FormItem {...formItemLayout} label="客户">
          {empInfo.custName || '--'}
        </FormItem>
        <FormItem hidden noStyle name="empInfo" />
      </Form>
    );
  }
}

SearchEmpWithState.defaultProps = {
  params: {}, // 请求参数
  searchUrl: '/csApi/empSendQueryService/getEmpToIdCode', // 搜索调用接口
  // 表单布局
  formItemLayout: {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 7 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 12 },
      md: { span: 10 },
    },
  },
};

SearchEmpWithState.propTypes = {
  params: PropTypes.object, // 请求参数
  filedName: PropTypes.string.isRequired,
  searchUrl: PropTypes.string, // 搜索调用接口
  formItemLayout: PropTypes.object, // 表单布局
  forwarRef: PropTypes.object.isRequired, // 上级传递下来的ref值
};

/**
 * 业务中有使用到此组件的地方、本来是可以使用ref来控制，但因为，表单已经被包裹在组件中这时就需要使用forwardRef来透过组件获得该表单的引用。然后在父组件直接调用 要传递的ref
 * 使用模板
 *    声明 formRef = React.createRef();
 *    使用 this.formRef?.current?.validateFields();
 *    其组件选中的数据 都在form empInfo字段中 具体可查看 ReduceEmployee/MinusModal 用法
      渲染 <SearchEmp
            ref={this.formRef}
            params={{ taskSource: 2 }}
            filedName="sendId"
          />
 *
 */

export default React.forwardRef((props, ref) => <SearchEmpWithState {...props} forwardRef={ref} />);
